<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>山东电信宽带网扩容分析</title>

    <!--jquery-->
    <script src="js/jquery/jquery-3.3.1.js"></script>

    <!--bootstrap 4.0-->
    <script src="js/bootstrap/js/bootstrap.js"></script>
    <link href="js/bootstrap/css/bootstrap.css" rel="stylesheet">

    <!--echart-->
    <script src="js/echart/echarts.js"></script>
    <script src="js/echart/ecStat.js"></script>
    <script src="map/shandong.js"></script>

    <script src="js/scrollbar/jquery.mCustomScrollbar.js"></script>
    <link href="js/scrollbar/jquery.mCustomScrollbar.css" rel="stylesheet">

    <style>
        * {
            margin: 0;
            padding: 0
        }

        [name="top_div"] {
            z-index: 7777;
            position: absolute;
            background-color: #000000;
            /*margin: 10% 20%  ;*/
            width: 100%;
            height: 100%;
            display: none;
            /*opacity: 0.95;*/
        }

        #modal_topo{
            z-index: 9999;
            position: absolute;
            background-color: #000000;
            /*margin: 10% 20%  ;*/
            display: none;
            /*opacity: 0.95;*/
        }
        #loading {
            width:170px;
            height:25px;
            position:absolute;
            top:50%;
            left:50%;
            z-index:10000;
            background: none;
            line-height:25px;
            vertical-align:middle;
            display:none;
        }
        .loader {
            margin: 0 0 2em;
            height: 100px;
            width: 20%;
            text-align: center;
            padding: 1em;
            margin: 0 auto 1em;
            display: inline-block;
            vertical-align: top;
        }
        /*
          Set the color of the icon
        */
        svg path,
        svg rect {
            fill: #FF6700;
        }

        body {
            background-color: #070709;
            /*background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#313131), to(#6F3F9B));*/
            /*background: url('img/background-img.png') repeat-y ;center;*/
        }

        /*::-webkit-scrollbar {*/
        /*display: none;*/
        /*}*/

        .panel {
            background: none;
            /*opacity: 0.8;*/
        }

        .panel-title {
            background: none;
            /*opacity: 0.8;*/
        }

        .all_user_num_span {
            background-color: #687784;
            font-size: 48px;
            color: #00E0FF;
        }

        .all_act_user_num_span {
            background-color: #687784;
            font-size: 48px;
            color: #EA4D58;
        }

        .all_act_itv_num_span {
            background-color: #687784;
            font-size: 48px;
            color: #F1E723;
        }

        .size_10_span {
            font-size: 10px;
            color: #FFFFFF;
        }

        .size_30_span {
            font-size: 30px;
            color: #33A260;
        }

        /*div{*/
        /*background-color: #070709;*/
        /*}*/
    </style>
</head>
<body id="body">
<!--<div id="loading"><img src="img/loading.gif" alt=""/></div>-->
<div class="loader" id="loading">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="40px" height="60px" viewBox="0 0 40 60" style="enable-background:new 0 0 50 50;" xml:space="preserve">
    <rect x="0" y="20" width="8" height="40" fill="#333" opacity="0.2">
      <animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0s" dur="0.6s" repeatCount="indefinite" />
      <animate attributeName="height" attributeType="XML" values="20; 40; 20" begin="0s" dur="0.6s" repeatCount="indefinite" />
      <animate attributeName="y" attributeType="XML" values="20; 10; 20" begin="0s" dur="0.6s" repeatCount="indefinite" />
    </rect>
    <rect x="16" y="10" width="8" height="40" fill="#333"  opacity="0.2">
      <animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.15s" dur="0.6s" repeatCount="indefinite" />
      <animate attributeName="height" attributeType="XML" values="20; 40; 20" begin="0.15s" dur="0.6s" repeatCount="indefinite" />
      <animate attributeName="y" attributeType="XML" values="20; 10; 20" begin="0.15s" dur="0.6s" repeatCount="indefinite" />
    </rect>
    <rect x="32" y="10" width="8" height="40" fill="#333"  opacity="0.2">
      <animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.3s" dur="0.6s" repeatCount="indefinite" />
      <animate attributeName="height" attributeType="XML" values="20; 40; 20" begin="0.3s" dur="0.6s" repeatCount="indefinite" />
      <animate attributeName="y" attributeType="XML" values="20; 10; 20" begin="0.3s" dur="0.6s" repeatCount="indefinite" />
    </rect>
  </svg>
</div>



<div id="top_div_olt" class="container-fluid" name="top_div" ondblclick="hideTopDivOLT()">
    <div class="row">
        <div class="col-lg-6 col-lg-offset-3" style="text-align: center">
            <h1>全省OLT设备扩容详情</h1>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-4 col-lg-offset-1">

        </div>
        <div class="col-lg-4 col-lg-offset-2">

        </div>
    </div>
</div>

<div id="top_div_sw" class="container-fluid" name="top_div" ondblclick="hideTopDivSW()">
    <div class="row">
        <div class="col-lg-6 col-lg-offset-3" style="text-align: center">
            <h1>全省SW设备扩容详情</h1>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-4 col-lg-offset-1">

        </div>
        <div class="col-lg-4 col-lg-offset-2">

        </div>
    </div>
</div>

<div id="top_div_city" class="container-fluid" name="top_div" style="background-color: #070709" ondblclick="hideTopDivCity()">
    <div class="row" style="height: 4%;border: #293436 2px solid;border-radius: 10px;background-color: #0F161C;">
        <div class="col-lg-6" style="text-align: left">
            <span style="font-size: 20px;color: #9acfea">地市网络设备扩容详情</span>
        </div>
    </div>
    <div class="row" style="height: 10%;border: #293436 2px solid;border-radius: 10px;margin: 2% 1%;background-color: #0F161C;">
        <div class="col-lg-6">
            <div class="row">
                <div class="col-md-2" style="height: 100%;">
                    <span id="city_name" style="font-size: 40px;color: #D2821A;line-height:70px;"></span>
                </div>
                <div class="col-md-2 col-md-offset-1" style="height: 100%;">
                    <span style="font-size: 18px;color: #9acfea;">宽带用户数</span><br>
                    <span style="font-size: 35px;color: white;" id="all_user_span"></span>
                </div>
                <div class="col-md-2 col-md-offset-1" style="height: 100%;">
                    <span style="font-size: 18px;color: #9acfea">活跃用户数</span><br>
                    <span style="font-size: 35px;color: white;" id="all_act_user_span"></span>
                </div>
                <div class="col-md-2 col-md-offset-1" style="height: 100%;">
                    <span style="font-size: 18px;color: #9acfea">激活iTV数</span><br>
                    <span style="font-size: 35px;color: white;" id="all_itv_span"></span>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="row">
                <div class="col-md-2" style="height: 100%;">
                    <span style="font-size: 18px;color: #9acfea">全市SW数</span><br>
                    <span style="font-size: 35px;color: white;" id="all_sw_span"></span>
                </div>
                <div class="col-md-2 col-md-offset-1" style="height: 100%;">
                    <span style="font-size: 18px;color: #9acfea">全市OLT数</span><br>
                    <span style="font-size: 35px;color: white;" id="all_olt_span"></span>
                </div>
                <div class="col-md-2 col-md-offset-1" style="height: 100%;" onclick="showCalculateBroadbandChart()">
                    <span style="font-size: 15px;color: #9acfea">宽带流量预测</span><br>
                    <span style="font-size: 15px;color: white;" id="calculate_broadband_span">点击查看详情</span>
                </div>
                <div class="col-md-2 col-md-offset-1" style="height: 100%;" onclick="showCalculateITVChart()">
                    <span style="font-size: 15px;color: #9acfea">itv流量预测</span><br>
                    <span style="font-size: 15px;color: white;" id="calculate_itv_span">点击查看详情</span>
                </div>
            </div>

        </div>

    </div>

    <div class="row" style="height: 40%;border: #293436 2px solid;border-radius: 10px;margin: 2% 1%;background-color: #0F161C;">
        <div class="col-lg-5" style="height: 100%;">
            <div id="city_olt_chart_div" style="height: 100%;width: 100%;">

            </div>
        </div>
        <div class="col-lg-7" style="height: 100%;border: #293436 1px solid;">
            <div id="info_body"  style="height: 100%;" >
                <ul id="city_detail_list" class="list-group">

                </ul>
            </div>

        </div>
    </div>
    <div class="row" style="height: 30%;border: #293436 2px solid;border-radius: 10px;margin: 1%;background-color: #0F161C;">
        <div class="col-lg-6" style="height: 100%;">
            <div class="row" style="height: 20%;">
                <div class="col-lg-12" style="height: 100%;text-align: center;">
                    <span style="font-size: 30px;color: white">SW流量分布</span>
                </div>
            </div>
            <div class="row" style="height: 80%;">
                <div class="col-xs-2" id="sw_95_div" style="height: 100%;" onclick="showCityDetail(this.id)">
                    <div style="height: 10%;text-align: center;">
                        <span style="width:100%;font-size: 20px;color: #9acfea;">95%</span>
                    </div>
                    <canvas id="sw_95" class="barCanvas" style="height: 70%;width: 100%;" >

                    </canvas>
                    <div style="height: 15%;text-align: center;">
                        <span style="width:100%;font-size: 25px;color: #9acfea;" id="sw_95_num" ></span>
                    </div>
                </div>
                <div class="col-xs-2" id="sw_90_div" style="height: 100%;" onclick="showCityDetail(this.id)">
                    <div style="height: 10%;text-align: center;">
                        <span style="width:100%;font-size: 20px;color: #9acfea;">90%</span>
                    </div>
                    <canvas id="sw_90" class="barCanvas" style="height: 70%;width: 100%;">

                    </canvas>
                    <div style="height: 15%;text-align: center;">
                        <span style="width:100%;font-size: 25px;color: #9acfea;" id="sw_90_num"></span>
                    </div>
                </div>
                <div class="col-xs-2" id="sw_80_div" style="height: 100%;" onclick="showCityDetail(this.id)">
                    <div style="height: 10%;text-align: center;">
                        <span style="width:100%;font-size: 20px;color: #9acfea;">80%</span>
                    </div>
                    <canvas id="sw_80" class="barCanvas" style="height: 70%;width: 100%;">

                    </canvas>
                    <div style="height: 15%;text-align: center;">
                        <span style="width:100%;font-size: 25px;color: #9acfea;" id="sw_80_num"></span>
                    </div>
                </div>
                <div class="col-xs-2" id="sw_70_div" style="height: 100%;" onclick="showCityDetail(this.id)">
                    <div style="height: 10%;text-align: center;">
                        <span style="width:100%;font-size: 20px;color: #9acfea;">70%</span>
                    </div>
                    <canvas id="sw_70" class="barCanvas" style="height: 70%;width: 100%;">

                    </canvas>
                    <div style="height: 15%;text-align: center;">
                        <span style="width:100%;font-size: 25px;color: #9acfea;" id="sw_70_num"></span>
                    </div>
                </div>
                <div class="col-xs-2" id="sw_60_div" style="height: 100%;" onclick="showCityDetail(this.id)">
                    <div style="height: 10%;text-align: center;">
                        <span style="width:100%;font-size: 20px;color: #9acfea;">60%</span>
                    </div>
                    <canvas id="sw_60"  class="barCanvas" style="height: 70%;width: 100%;">

                    </canvas>
                    <div style="height: 15%;text-align: center;">
                        <span style="width:100%;font-size: 25px;color: #9acfea;" id="sw_60_num"></span>
                    </div>
                </div>
                <div class="col-xs-2" id="sw_etc_div" style="height: 100%;" onclick="showCityDetail(this.id)">
                    <div style="height: 10%;text-align: center;">
                        <span style="width:100%;font-size: 20px;color: #9acfea;">其他</span>
                    </div>
                    <canvas id="sw_etc" class="barCanvas" style="height: 70%;width: 100%;">

                    </canvas>
                    <div style="height: 15%;text-align: center;">
                        <span style="width:100%;font-size: 25px;color: #9acfea;" id="sw_etc_num"></span>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-6" style="height: 100%;border: 1px #293436 solid">
            <div class="row" style="height: 20%;">
                <div class="col-lg-12" style="height: 100%;text-align: center;">
                    <span style="font-size: 30px;color: white">OLT流量分布</span>
                </div>
            </div>
            <div class="row" style="height: 80%;">
                <div class="col-xs-2" id="olt_95_div" style="height: 100%;" onclick="showCityDetail(this.id)">
                    <div style="height: 10%;text-align: center;">
                        <span style="width:100%;font-size: 20px;color: #9acfea;">95%</span>
                    </div>
                    <canvas id="olt_95" class="barCanvas" style="height: 70%;width: 100%;" >

                    </canvas>
                    <div style="height: 10%;text-align: center;">
                        <span style="width:100%;font-size: 25px;color: #9acfea;" id="olt_95_num" ></span>
                    </div>
                </div>
                <div class="col-xs-2" id="olt_90_div" style="height: 100%;" onclick="showCityDetail(this.id)">
                    <div style="height: 10%;text-align: center;">
                        <span style="width:100%;font-size: 20px;color: #9acfea;">90%</span>
                    </div>
                    <canvas id="olt_90" class="barCanvas" style="height: 70%;width: 100%;">

                    </canvas>
                    <div style="height: 10%;text-align: center;">
                        <span style="width:100%;font-size: 25px;color: #9acfea;" id="olt_90_num"></span>
                    </div>
                </div>
                <div class="col-xs-2" id="olt_80_div" style="height: 100%;" onclick="showCityDetail(this.id)">
                    <div style="height: 10%;text-align: center;">
                        <span style="width:100%;font-size: 20px;color: #9acfea;">80%</span>
                    </div>
                    <canvas id="olt_80" class="barCanvas" style="height: 70%;width: 100%;">

                    </canvas>
                    <div style="height: 15%;text-align: center;">
                        <span style="width:100%;font-size: 25px;color: #9acfea;" id="olt_80_num"></span>
                    </div>
                </div>
                <div class="col-xs-2" id="olt_70_div" style="height: 100%;" onclick="showCityDetail(this.id)">
                    <div style="height: 10%;text-align: center;">
                        <span style="width:100%;font-size: 20px;color: #9acfea;">70%</span>
                    </div>
                    <canvas id="olt_70" class="barCanvas" style="height: 70%;width: 100%;">

                    </canvas>
                    <div style="height: 15%;text-align: center;">
                        <span style="width:100%;font-size: 25px;color: #9acfea;" id="olt_70_num"></span>
                    </div>
                </div>
                <div class="col-xs-2" id="olt_60_div" style="height: 100%;" onclick="showCityDetail(this.id)">
                    <div style="height: 10%;text-align: center;">
                        <span style="width:100%;font-size: 20px;color: #9acfea;">60%</span>
                    </div>
                    <canvas id="olt_60"  class="barCanvas" style="height: 70%;width: 100%;">

                    </canvas>
                    <div style="height: 15%;text-align: center;">
                        <span style="width:100%;font-size: 25px;color: #9acfea;" id="olt_60_num"></span>
                    </div>
                </div>
                <div class="col-xs-2" id="olt_etc_div" style="height: 100%;" onclick="showCityDetail(this.id)">
                    <div style="height: 10%;text-align: center;">
                        <span style="width:100%;font-size: 20px;color: #9acfea;">其他</span>
                    </div>
                    <canvas id="olt_etc" class="barCanvas" style="height: 70%;width: 100%;">

                    </canvas>
                    <div style="height: 15%;text-align: center;">
                        <span style="width:100%;font-size: 25px;color: #9acfea;" id="olt_etc_num"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--style="background-color: #404a59"-->
<!---->

<div id="main_body" class="container-fluid">
    <div class="row" style="height: 4%;">
        <div class="col-lg-6">
            <span style="font-size: 24px;color: white;">山东电信宽带网扩容分析</span>
        </div>
        <div class="col-lg-2 col-lg-offset-4" style="text-align: right;">
            <span id="clock" style="color:#84848D;font-size: 20px"></span>
        </div>
    </div>
    <div class="row" style="height: 31%;">
        <div class="col-md-6" style="height: 100%;">
            <div class="row" style="height: 100%;">
                <div class="col-xs-6"
                     style="height: 98%;width: 48%;margin-right: 2%;border: #293436 2px solid;border-radius: 10px;background-color: #0F161C;"
                     ondblclick="showTopDiv('top_div_sw')">
                    <div id="mychart1" style="height: 98%;width: 100%;background-color: #0F161C;">

                    </div>
                </div>
                <div class="col-xs-6"
                     style="height: 98%;width: 48%;margin-left: 1%;border: #293436 2px solid;border-radius: 10px;background-color: #0F161C;"
                     ondblclick="showTopDiv('top_div_olt')">
                    <div id="mychart2" style="height: 100%;width: 100%;background-color: #0F161C;">

                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4" style="height: 100%;">
            <div id="mychart3"
                 style="height: 98%;width: 98%;margin-left: 1%;border: #293436 2px solid;border-radius: 10px;background-color: #0F161C;">

            </div>
        </div>
        <div class="col-md-2" style="height: 100%;">
            <div class="row" style="height: 48%;margin-bottom: 2%;">
                <div class="panel panel-default"
                     style="height: 100%;width: 98%;border: #293436 2px solid;border-radius: 10px;">
                    <div class="panel-heading" style="background-color: #1D2937;border: #293436 2px solid;">
                        <h3 class="panel-title" style="color: white">
                            全网汇聚交换机数量
                        </h3>
                    </div>
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-xs-8">
                                <span style="font-size: 48px;color: white;" id="sw_count_span"></span><span
                                    style="font-size: 18px;color: white;">台</span>

                            </div>
                            <div class="col-xs-2">
                                <img src="img/SW.png" width="60" height="60">

                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row" style="height: 48%;margin-top: 2%;;">
                <div class="panel panel-default"
                     style="height: 100%;width:98%;border: #293436 2px solid;border-radius: 10px;">
                    <div class="panel-heading" style="background-color: #1D2937;border: #293436 2px solid;">
                        <h3 class="panel-title" style="color: white">
                            全网OLT数量
                        </h3>
                    </div>
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-xs-8">
                                <span style="font-size: 48px;color: white;" id="olt_count_span"></span><span
                                    style="font-size: 18px;color: white;">台</span>

                            </div>
                            <div class="col-xs-2">
                                <img src="img/olt.png" width="60" height="60">

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <div class="row" style="height: 63%;">
        <div class="col-md-6"
             style="height: 98%;width: 49.5%;margin:1% 1% 0 0 ;border: #293436 2px solid;border-radius: 10px;background-color: #0F161C">
            <div id="map_layer" style="width: 100%;height: 100%">

            </div>
        </div>
        <div class="col-md-4" style="height: 98%;">
            <div class="row"
                 style="height: 66.6%;width:97%;margin: 3% 1% 2% 0.5%;border: #293436 2px solid;border-radius: 10px;background-color: #0F161C">
                <div class="col-xs-12" style="height: 100%;">
                    <div class="row" style="height: 33%;">
                        <div class="col-xs-6 col-xs-offset-1" id="all_user_div">
                            <h1 style="color: white; font-size: 18px"> 全网宽带用户数</h1>
                        </div>
                        <div class="col-xs-5" id="all_user_chart" style="height: 100%;">

                        </div>
                    </div>
                    <div class="row" style="height: 33%;border: #293436 1px solid;">
                        <div class="col-xs-6 col-xs-offset-1" id="all_act_user_div">
                            <h1 style="color: white; font-size: 18px"> 全网活跃宽带用户数</h1>

                        </div>
                        <div class="col-xs-5" id="all_act_user_chart" style="height: 100%;">

                        </div>
                    </div>
                    <div class="row" style="height: 33%;">
                        <div class="col-xs-6 col-xs-offset-1" id="all_itv_div">
                            <h1 style="color: white; font-size: 18px"> 全网iTV用户数</h1>
                        </div>
                        <div class="col-xs-5" id="all_act_itv_chart" style="height: 100%;">

                        </div>
                    </div>
                </div>
            </div>
            <div class="row"
                 style="height: 32.3%;width:97%;margin: 1%;border: #293436 2px solid;border-radius: 10px;background-color: #0F161C">
                <div class="col-xs-6">
                    <span style="color: #FFFFFF; font-size: 13px">GPON端口数</span>
                    <span style="color: #D2821A; font-size: 33px">216945<span class="size_10_span">个</span></span>
                    <br>
                    <span class="size_10_span">用户数</span>
                    <span class="size_30_span">3708962<span class="size_10_span">户</span></span>
                    <br>
                    <span class="size_10_span">待裂化数</span>
                    <span class="size_30_span">1001<span class="size_10_span">个</span></span>
                </div>
                <div class="col-xs-6">
                    <span style="color: #FFFFFF; font-size: 13px">EPON端口数</span>
                    <span style="color: #D2821A; font-size: 33px">28206<span class="size_10_span">个</span></span>
                    <br>
                    <span class="size_10_span">用户数</span>
                    <span class="size_30_span">207902<span class="size_10_span">户</span></span>
                    <br>
                    <span class="size_10_span">待裂化数</span>
                    <span class="size_30_span">1340<span class="size_10_span">个</span></span>
                </div>
            </div>
        </div>
        <div class="col-md-2"
             style="height: 98%;width: 16%;margin-top:1%;border: #293436 2px solid;border-radius: 10px;background-color: #0F161C;">
            <div class="row" style="height: 33.3%;">
                <div id="sw_utilization_chart" style="height: 100%;">

                </div>
            </div>
            <div class="row" style="height: 33.3%;border: #293436 1px solid;">
                <div id="olt_direct_chart" style="height: 100%;">

                </div>
            </div>
            <div class="row" style="height: 33.3%;;">
                <div id="itv_direct_quality_chart" style="height: 100%;">

                </div>
            </div>
        </div>
    </div>


</div>

<!--modal-->
<div class="modal fade" id="modal_topo" tabindex="-1" role="dialog"  >
    <div class="modal-dialog" role="document" style="width: 1200px;background-color: #0F161C">
        <div class="modal-content">
            <div class="modal-header" style="background-color: #1D2937">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="topo_title" style="color: #9acfea"></h4>
            </div>
            <div class="modal-body" id="modal_topo_body" style="height: 700px;background-color: #0F161C">
                <!--<canvas id="topo_canvas" style="height: 100%;width: 100%;background-color: #0F161C">-->


                <!--</canvas>-->
            </div>
            <!--<div class="modal-footer" style="background-color: #0F161C">-->
            <!--<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>-->
            <!--</div>-->
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<script>
    screenWidth = window.screen.width;
    screenHeight = window.screen.height;
    $('#main_body').height(screenHeight);
    // $('div[name="top_div"]').height(screenHeight);
</script>

<!--function-->
<script src="js/myecharts/myfunction.js"></script>

<!--getData-->
<script src="js/myecharts/getData.js"></script>

<!--mapChart-->
<script src="js/myecharts/mapechart.js"></script>
<!--myChart1-->
<script src="js/myecharts/myechart1.js"></script>
<!--myChart2-->
<script src="js/myecharts/myechart2.js"></script>
<!--&lt;!&ndash;myChart3&ndash;&gt;-->
<script src="js/myecharts/myechart3.js"></script>

<!--allUserChart-->
<script src="js/myecharts/allUserChart.js"></script>
<!--actUserChart-->
<script src="js/myecharts/actUserChart.js"></script>
<!--actUserChart-->
<script src="js/myecharts/actItvChart.js"></script>

<!--actUserChart-->
<script src="js/myecharts/swUtilizationChart.js"></script>
<!--directConnectSW-->
<script src="js/myecharts/oltDirectChart.js"></script>

<!--DirectConnectQuality-->
<script src="js/myecharts/itvDirectQualityChart.js"></script>

<!--CityOltChart-->
<script src="js/myecharts/cityBoundChart.js"></script>
<!--&lt;!&ndash;myChart4&ndash;&gt;-->
<!--<script src="js/myecharts/myecharts4.js"></script>-->
<!--PonUserChart-->
<script src="js/myecharts/ponUserCountChart.js"></script>

<script src="js/myecharts/CalculateOnBroadband.js"></script>
<script src="js/myecharts/CalculateOnITV.js"></script>

<!--topo-->
<!--<script src="js/jtopo/jtopo-0.4.8-dev.js"></script>-->
<script src="js/jtopo/jtopo-0.4.8-min.js"></script>
<script src="js/myecharts/myTopo.js"></script>

</body>
</html>